<%@ page pageEncoding="UTF-8" contentType="text/html; charset=UTF-8" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<%@ taglib uri="http://www.springframework.org/tags/form" prefix="form"%>
<%@ taglib uri="http://www.springframework.org/tags" prefix="spring"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn"%>

<spring:url value="/resources/js-framework/datatables/jquery.dataTables.css" var="jquery_dataTables_css"/>
<spring:url value="/resources/js-framework/datatables/jquery.dataTables.min.js" var="jquery_dataTables_min_js"/>
<spring:url value="/resources/js-framework/populate/jquery.populate.pack.js" var="jquery_populate_pack_js"/>

<!-- DataTables CSS -->
<link href="${jquery_dataTables_css}" media="screen" rel="stylesheet" type="text/css"/>
<!-- DataTables -->
<script src="${jquery_dataTables_min_js}" type="text/javascript">
        <!-- required for FF3 and Opera -->
</script>

<script type="text/javascript" charset="utf-8">
                $(document).ready(function() {
                                var wWidth =  $(document).width();
                                $('.container').css('width', wWidth);
                });
</script>


<!-- Populate -->
<script src="${jquery_populate_pack_js}" type="text/javascript">
        <!-- required for FF3 and Opera -->
</script>

<script>
		// Wait until the DOM has loaded before querying the document
		
		$(document).ready(function(){
		$(".tab_div").hide();
		$('ul.tabs a').click(function () {
			$(".tab_div").hide().filter(this.hash).show();
			$("ul.tabs a").removeClass('active');
			$(this).addClass('active');
			return false;
		}).filter(':first').click();
		
		var resourceTable = $('#resourceTableId').dataTable({
			"sDom": '<"projecttoolbar">lfrtip'
		});
		
		
		$("div.projecttoolbar").html(
				'<div class="btnIcon" style="margin-left: 10px; margin-bottom:10px;margin-top:-5px;border:0px solid #ff0000;">'+
					'<a href="#" class="blue_link" id="addNew" >'+
						'<img src="resources/images/addUser.gif" width="16" height="22" /> '+
					'Add New </a>'+
				'</div>');
		    resourceTable.$('tr').dblclick( function () {
  		    var sData = resourceTable.fnGetData(this);
  		    openMaintainance(($(this).attr('id')));
  		});
		
		    

			$("#dateOfJoiningId").datepicker();
			$("#penultimateAppraisalId").datepicker();
			$("#lastAppraisalId").datepicker();
		
			$('#addNew, #update').click(function(){
				$("#newEmployee").reset();
				displayMaintainance();
			});
	  		$('a[href$="tab2"]').click(function(){
				$("#newEmployee").reset();
				
			});
	  		var wWidth =  $(document).width();
			$('.container').css('width', wWidth+500);
		});
	
  		function openMaintainance(id){

			getResourceById(id);
			displayMaintainance();
			var form = document.forms['newEmployee']; 
		       form.userAction.value="update"; 

		}
		
		function getResourceById(id){
			$.getJSON("resources/"+id,{}, showResource);
		}
		
		function showResource(data){
			$("#newEmployee").populate(data, {debug:false, resetForm:true});
		}
		
		function displayMaintainance(){
			
			$("ul.tabs a").removeClass('active');
			$(".tab_div").hide().next("#tab2".hash).show();
			$('a[href$="tab2"]').addClass('active');
// 			$('#newEmployee').changeFormMethod('PUT');
			

		}
		
		function saveResource(){
			var pk = $("#newEmployee input[name=employeeId]").val() ;
			//not doing any validation .. We will use jquery validation framework to do that for us before form gets submitted
			if( pk != null && pk > 0){
				 $.putJson('resources', $("#newEmployee").toDeepJson() , function(data){
					 location.reload();
				 } , 'json');
			}else{
				 $.postJson('resources',$("#newEmployee").toDeepJson() , function(data){
					 //should call refreshGrid instead of location reload, and update customerTableId table.
					 location.reload();
				}, 'json'); 				
			}
		}
		
		function refreshGrid(){
			$.getJSON("resources", function(data){
				
			});
		}
		

		
</script>
<div class="mid_section">
	<div class="botMargin">
		<h1>Resource</h1>
	</div>
	
	<div class="tab_seaction">
		<ul class='tabs'>
			<li><a href='#tab1'>List</a></li>
			<li><a href='#tab2'>Maitainance</a></li>
		</ul>
		<div id='tab1' class="tab_div">
			<div class="tbl">
				<table class="dataTable" id="resourceTableId">
					<thead>
						<tr>
							<th width="4%" align="center" valign="middle">Emp ID</th>
							<th width="8%" align="center" valign="middle">Emp Name</th>
							<th width="6%" align="center" valign="middle">Designation</th>
							<th width="4%" align="center" valign="middle">Grade</th>
							<th width="5%" align="center" valign="middle">DOJ</th>
							<th width="5%" align="center" valign="middle">Ownership</th>
							<th width="5%" align="center" valign="middle">VISA</th>
							<th width="5%" align="center" valign="middle">App Date 1</th>
							<th width="5%" align="center" valign="middle">App Date 2</th>
							<th width="8%" align="center" valign="middle">E-Mail</th>
							<th width="6%" align="center" valign="middle">Resume</th>
							<th width="6%" align="center" valign="middle">Contact Number</th>
							<th width="5%" align="center" valign="middle">Location</th>
							<th width="6%" align="center" valign="middle">Current RM</th>
							<th width="7%" align="center" valign="middle">Current
								Project</th>
							<th width="7%" align="center" valign="middle">Planned
								capacity</th>
							<th width="7%" align="center" valign="middle">Actual
								Capacity</th>

						</tr>
					</thead>
					<tbody>
						<c:forEach var="resourceList" items="${resources}">
							<tr class="even">
								<td align="center" valign="middle"><a href="#" id="employeeid" 
									onclick="openMaintainance(${resourceList.employeeId});">${resourceList.employeeId}</a></td>
								<td align="center" valign="middle">${resourceList.employeeName}</td>
								<td align="center" valign="middle">${resourceList.designationId.designationName}</td>
								<td align="center" valign="middle">${resourceList.gradeId.grade}</td>
								<td align="center" valign="middle">${resourceList.dateOfJoining}</td>
								<td align="center" valign="middle">${resourceList.ownership.ownershipName}</td>
								<td align="center" valign="middle">${resourceList.visaId.visa}</td>
								<td align="center" valign="middle">${resourceList.lastAppraisal}</td>
								<td align="center" valign="middle">${resourceList.penultimateAppraisal}</td>
								<td align="center" valign="middle">${resourceList.emailId}</td>
								<td align="center" valign="middle"><a href="resources/files/${resourceList.employeeId}">${resourceList.resumeFileName}</a></td>
								<td align="center" valign="middle">${resourceList.contactNumber}</td>
								<td align="center" valign="middle">${resourceList.locationId.location}</td>
								<td align="center" valign="middle">${resourceList.currentReportingManager}</td>
								<td align="center" valign="middle">${resourceList.currentProjectId.projectName}</td>
								<td align="center" valign="middle">${resourceList.plannedCapacity}</td>
								<td align="center" valign="middle">${resourceList.actualCapacity}</td>
							</tr>
						</c:forEach>
					</tbody>
				</table>
<!-- 				<div class="btns"> -->
<!-- 					<input type="button" value="Cancel" /> -->
<!-- 				</div> -->
			</div>
			<div class="clear"></div>
		</div>
		<div id='tab2' class="tab_div">
			<div class="search_filter">
				<div align="right">
					<a href="#" class="blue_link" id="save"
						onclick="document.getElementById('newEmployee').submit();"> <img
						src="resources/images/save.png" name="save" width="16" height="22" />
						Save
					</a>
					
				</div>
			</div>
			<div class="form">
				<form action="resources" method="post" id="newEmployee" name="newEmployee" enctype="multipart/form-data">
					<input type="hidden" name="userAction" id="userAction"/> 
					<table border="0" cellpadding="0" cellspacing="5" width="100%">
					
						<tr>
							<td width="15%" align="right">Employee ID:<span
								class="astric">*</span>
							</td>
							<td width="20%" align="left"><input type="text" value=""
								name="employeeId" readonly="readonly"/></td>
							<td width="10%" align="right">Employee Name:<span
								class="astric">*</span></td>
							<td width="18%" align="left"><input type="text" value=""
								name="employeeName"></td>
							<td width="18%" align="right">Designation:<span
								class="astric">*</span></td>
							<td width="20%" align="left"><select
								name="designationId.id" class="dd_cmn"
								dd_div="dealer">
									<c:forEach var="designation" items="${designation}">
										<option value="${designation.id}">${designation.designationName}</option>
									</c:forEach>
							</select></td>
						</tr>
						<tr>
							<td align="right">Grade :<span class="astric">*</span>
							</td>
							<td align="left">
								<select name="gradeId.id" id="selGrade">
										<c:forEach var="grade" items="${grade}">
											<option value="${grade.id}">${grade.grade}</option>
										</c:forEach>
								</select>
							</td>
							<td align="right">DOJ:<span class="astric">*</span></td>
							<td align="left"><input type="text" value=""
								id="dateOfJoiningId" name="dateOfJoining"></td>
							<td align="right">Ownership:<span class="astric">*</span></td>
							<td align="left">
							
							<select name="ownership" class="dd_cmn"
								dd_div="dealer">
									
									<c:forEach var="ownership" items="${ownership}">
										<option value="${ownership.id}">${ownership.ownershipName}</option>
									</c:forEach>
							</select>
							
							</td>
						</tr>
						<tr>
							<td align="right">VISA Status:</td>
							<td align="left"><select name="visaId.id" id="selGrade">
									<c:forEach var="visa" items="${visa}">
										<option value="${visa.id}">${visa.visa}</option>
									</c:forEach>
							</select></td>
							<td align="right">Apprisal Date 1:<span class="astric">*</span></td>
							<td align="left"><input type="text" value=""
								name="lastAppraisal" id="lastAppraisalId"></td>
							<td align="right">Appraisal Date 2:<span class="astric">*</span></td>
							<td align="left"><input type="text" value=""
								name="penultimateAppraisal" id="penultimateAppraisalId"></td>
						</tr>
						<tr>
							<td align="right">E-Mail ID:<span class="astric">*</span>
							</td>
							<td align="left"><input type="text" value="" name="emailId" /></td>
							<td align="right">Resume:</td>
							<td align="left"><input name="file" type="file" /></td>
							<td align="right">Contact Number:</td>
							<td align="left"><input type="text" value=""
								name="contactNumber"></td>
						</tr>
						<tr>
							<td align="right">Customer User ID Details:</td>
							<td align="left"><textarea name="customerIdDetail" cols=""
									rows=""></textarea></td>
							<td align="right">Location:<span class="astric">*</span></td>
							<td align="left">
							<select name="locationId.id">
									<c:forEach var="location" items="${location}">
										<option value="${location.id}">${location.location}</option>
									</c:forEach>
							</select>
							</td>
							<td align="right">Current RM:</td>
							<td align="left"><input type="text" value=""
								name="currentReportingManager"></td>
						</tr>
						<tr>
							<td align="right">Current Project:</td>
							<td align="left">
							
								
								<select name="currentProjectId.id" class="dd_cmn"
								dd_div="dealer">
									<option selected="selected" value="-1">No Project</option>
									<c:forEach var="projects" items="${projects}">
										<option value="${projects.id}">${projects.projectName}</option>
									</c:forEach>
							</select>
							
								</td>
							<td align="right">Planned capacity:<span class="astric">*</span></td>
							<td align="left"><input type="text" value=""
								name="plannedCapacity"></td>
							<td align="right">Actual Capacity:</td>
							<td align="left"><input type="text" value=""
								name="actualCapacity"></td>
						</tr>
						<tr>
							<td align="right">BU</td>
							<td align="left">
							
								
								<select name="buId.id" class="dd_cmn"
								dd_div="dealer">
									<c:forEach var="bus" items="${bus}">
										<option value="${bus.id}">${bus.name}</option>
									</c:forEach>
							</select>
							
								</td>
						</tr>
						
					</table>
				</form>
			</div>
			</div>
	</div>
</div>